<template>
  <div class="bg-fff bdr-10 home">
    <div class="left fx-1">
      <v-todo :list="topList" style="height: 300px;" class="todo bd-1 bdr-10" title="我的业务"></v-todo>
      <v-charts class=" c fx-1 pd-10 bdr-10 bd-1" title="利润统计" v-model="chartDate" @refresh="getChart" ref="charts"/>
    </div>
    <div class="right fx-1">
      <v-wallet-channel class="pd-10 bdr-10 bd-1 wallet" :wallet="wallet" @refresh="getWallet"/>
      <v-bi class="bi bd-1 bdr-10" :list="biList"></v-bi>
      <v-order class="order bd-1 bdr-10" :tableData="tableData"></v-order>
    </div>
  </div>
</template>
<script lang="ts">
  // name 渠道专员
  import { Vue, Component } from 'vue-property-decorator'
  import vTodo from '../components/todo.vue'
  import vCharts from '@/components/home-components/charts'
  import vStore from '../components/store.vue'
  import vBi from '../components/bi.vue'
  import vWalletChannel from '../components/wallet-channel.vue'
  import vOrder from '../components/order.vue'

  @Component({
    components: {
      vTodo, vCharts, vStore, vBi, vWalletChannel, vOrder
    }
  })
  export default class Home extends Vue {
    topList = [
      {
        path: '/member/list',
        title: '新增企业',
        value: ''
      },
      {
        path: '/member/list',
        title: '企业会员',
        value: ''
      }
    ]
    chartDate = 30
    wallet = {}
    biList = [
      {
        title: '本月订单数量（笔）',
        value: 10
      },
      {
        title: '本月交易额（元）',
        value: 10
      },
      {
        title: '本月利润合计（元）',
        value: 10
      },
      {
        title: '本日订单数量（笔）',
        value: 10
      },
      {
        title: '本日交易额（元）',
        value: 10
      },
      {
        title: '平均单笔利润（元）',
        value: 10
      }
    ]
    tableData: TableData[] = [
      {
        header: [
          {
            key: 'enterprise_name',
            label: '企业名称'
          },
          {
            key: 'bill_sum',
            label: '票据数量'
          },
          {
            key: 'clerk_name',
            label: '业务员'
          },
          {
            key: 'turnover',
            label: '交易额'
          }
        ],
        body: [
          {
            enterprise_name: '呢咋',
            bill_sum: 5,
            clerk_name: 12,
            turnover: 22222
          },
          {
            enterprise_name: '呢咋',
            bill_sum: 5,
            clerk_name: 12,
            turnover: 22222
          }
        ],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '企业交易额排名',
          path: 'rank/1'
        }
      },
      {
        header: [
          {
            key: 'clerk_name',
            label: '业务员'
          },
          {
            key: 'ent_sum',
            label: '企业数量'
          },
          {
            key: 'turn_over',
            label: '交易额'
          }
        ],
        body: [
          {
            clerk_name: '呢咋',
            ent_sum: 5,
            turn_over: 12
          },
          {
            clerk_name: '呢咋',
            ent_sum: 5,
            turn_over: 12
          }
        ],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '业务员交易排名',
          path: 'rank/2'
        }
      }
    ]

    get userInfo () {
      return JSON.parse(window.sessionStorage.getItem('userInfo')) || {}
    }
    makeChart (data) {
      let mc = data.myCommisionList.map(v => v[Object.keys(v)[0]])
      let sc = data.salesmanCommisionList.map(v => v[Object.keys(v)[0]])
      let date = data.myCommisionList.map(v => Object.keys(v)[0])
      return {
        columns: ['日期', '我的利润', '渠道商佣金'],
        rows: date.map((v, i) => ({
          '日期': v,
          '我的利润': mc[i],
          '业务员佣金': sc[i],
        }))
      }
    }

    async getChart () {
      let res: AjaxResponse = await  this.$axios.post('b/boms/commision/statistics/list', {
        day: this.chartDate
      })
      console.log(res)
      this.$refs.charts.init(this.makeChart(res.data),{
        dimension: ['日期'],
        metrics: ['我的利润', '业务员佣金'],
        area: true,
        stack: { '利润': ['我的利润', '业务员佣金'] }

      })
    }

    async getTodo () {
      let res: AjaxResponse = await this.$axios.get(`g/gateway/operator/channel/${this.userInfo.userId}`)
      this.topList[0].value = res.data.newEnterpriseNum
      this.topList[1].value = res.data.allEnterpriseNum

      this.biList[0].value = res.data.monthOrderSum
      this.biList[1].value = res.data.monthTurnover
      this.biList[2].value = res.data.monthCommision
      this.biList[3].value = res.data.dayOrderSum
      this.biList[4].value = res.data.dayTurnover
      this.biList[5].value = res.data.avgCommision
    }


    async getWallet () {
      let res: AjaxResponse = await this.$axios.post('g/gateway/commision/statistics/info', {})
      this.wallet = res.data
    }

    async getRank () {
      let res: AjaxResponse = await this.$axios.post('g/gateway/rank/getForChannel', {
        userId: this.userInfo.userId,
        type: 0,
        isHome: 0,
        currentPage: 1,
        pageSize: 3
      })
      if (res.responseCode === 200) {
        this.tableData[0].body = res.data.ent_rank.items
        this.tableData[1].body = res.data.clerk_rank.items
      }
    }

    mounted () {
      this.getChart()
      this.getTodo()
      this.getWallet()
      this.getRank()
    }
  }
</script>
<style lang="less" scoped>
  .home {
    min-height: 1030px;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-height: 1000px;
      width: 49.5%;
    }
    .left {
      padding-right: 10px;

    }
    .right {
      padding-left: 10px;
    }
  }

  .todo {
    height: 300px;
  }

  .charts {
    height: 332px;
  }

  .store {
    height: 192px;
  }

  .wallet {
    height: 182px;
  }

  .bi {
  }

  .order {
    height: 416px;
  }

  .bd-1 {
    border: 1px solid #ddd;
    padding: 0 30px;
  }

  .c {
    margin-top: 10px;
  }
</style>
